<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>计算属性</title>
	<script type="text/javascript" src="vue.js"></script>
</head>

<body>
	<div id="app">
      <div>
          str的原始值 : {{str}}
      </div>
      <div>
        1.转换为大写后反转str：{{str.toUpperCase().split("").reverse().join("")}}
      </div>

      <div>2.计算属性返回str:{{reverseStr}}</div>
	</div>


</body>
<script>
	//vue是一个类 使用的是Vue的实例
	const vm = new Vue({
		el: "#app",
		data() {
			return {
                str: "hello world",
            }
        },
        methods:{
            decrement(){
            }
        },
        computed:{
            /*
            在computed中声明的全部是计算属性依赖data中已有的一个属性 
            计算得到的一个新的结果称为计算属性家
            */
            reverseStr()/*申明了一个计算属性叫做reverseStr*/{
                /*计算属性一定要有一个返回结果*/
                /*访问data中的属性必须通过this*/
                return this.str.toUpperCase().split("").reverse().join("")
            }
        }
	})

</script>

</html>